<template>
    <div class="search-box">
        <div class="search-fields">
            <div class="field">
                <div class="field-title">城市</div>
                <div class="field-select" @click="handleSelect('city')">
                    <span class="selected-text" :class="{ placeholder: !selectedCity }">
                        {{ selectedCity || '选择你的城市' }}
                    </span>
                    <svg-icon name="common/caret-down" />
                </div>
            </div>
            <div class="divider"></div>
            <div class="field">
                <div class="field-title">类型</div>
                <div class="field-select" @click="handleSelect('type')">
                    <span class="selected-text" :class="{ placeholder: !selectedType }">
                        {{ selectedType || '选择房产类型' }}
                    </span>
                    <svg-icon name="common/caret-down" />
                </div>
            </div>
            <div class="divider"></div>
            <div class="field">
                <div class="field-title">户型</div>
                <div class="field-select" @click="handleSelect('layout')">
                    <span class="selected-text" :class="{ placeholder: !selectedLayout }">
                        {{ selectedLayout || '选择房屋户型' }}
                    </span>
                    <svg-icon name="common/caret-down" />
                </div>
            </div>
            <div class="divider"></div>
            <button class="search-btn">搜索</button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const selectedCity = ref('')
const selectedType = ref('')
const selectedLayout = ref('')

const handleSelect = (type) => {
    // 这里处理选择逻辑，可以触发弹窗或下拉菜单
    console.log('选择', type)
}
</script>

<style lang="scss" scoped>
@use "sass:color";

.search-box {
    position: absolute;
    left: 412px;
    top: 675px;
    width: 1096px;
    height: 128px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 
        0 0 0 1px rgba(207, 211, 214, 0.8),  /* 边框效果 */
        inset 0 2px 4px rgba(0, 0, 0, 0.02),  /* 内阴影 */
        0 4px 8px rgba(74, 96, 161, 0.04);    /* 外阴影 */

    .search-fields {
        height: 100%;
        display: grid;
        grid-template-columns: 274px 1px 274px 1px 274px 1px auto;
        align-items: center;
        gap: 0;

        .field {
            display: flex;
            flex-direction: column;
            padding: 0 58px;

            .field-title {
                font-size: 20px;
                color: #2C3A61;
                margin-bottom: 12px;
            }

            .field-select {
                display: flex;
                align-items: center;
                cursor: pointer;
                user-select: none;
                transition: all 0.3s ease;

                .selected-text {
                    font-size: 16px;
                    color: #2C3A61;
                    letter-spacing: 3px;
                    line-height: 1.5;
                    margin-right: 8px;
                    transition: all 0.3s ease;

                    &.placeholder {
                        color: #889099;
                    }
                }

                .svg-icon {
                    width: 24px;
                    height: 24px;
                    color: #4A60A1;
                    transition: transform 0.3s ease;
                }

                &:hover {
                    .selected-text:not(.placeholder) {
                        color: #4A60A1;
                    }
                    .svg-icon {
                        transform: translateY(2px);
                    }
                }

                &:active {
                    .selected-text:not(.placeholder) {
                        transform: scale(0.98);
                    }
                    .svg-icon {
                        transform: translateY(4px);
                    }
                }
            }
        }

        .divider {
            width: 1px;
            height: 64px;
            background: rgba(207, 211, 214, 0.5);
            margin: 32px 0;
        }

        .search-btn {
            width: 80px;
            height: 48px;
            margin-left: 89px;
            background: #4A60A1;
            border-radius: 4px;
            border: none;
            color: #FFFFFF;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
                background: color.adjust(#4A60A1, $lightness: -5%);
            }
        }
    }
}
</style> 